import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { combineLatest, map, pluck } from 'rxjs';

@Component({
  selector: 'app-demo',
  template: ` <h1>{{ pageId$ | async }}</h1>
    <div>{{ userName$ | async }}</div>
    <a [routerLink]="['..', ((pageId$ | async) || 10) - 1]">prev</a>
    &nbsp;
    <a [routerLink]="['..', +((pageId$ | async) || 10) + 1]">next</a>`,
  styles: [],
})
export class DemoComponent {
  pageId = this.route.snapshot.params.id;
  pageId$ = this.route.params.pipe(
    pluck('id'),
    map((id) => +id)
    // tap(id => (this.pageId = id))
  );

  userList$ = this.http.get<any[]>(`http://localhost:8200/users/?delay=100`);
  userName$ = combineLatest([this.pageId$, this.userList$]).pipe(
    map(([id, users]) => {
      const _id = +id % users.length
      return users[_id]['name'];
    }),
  );

  constructor(private route: ActivatedRoute, private http: HttpClient) { }

}
